<template>
	<view class="container">
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>
		<view class="form">
			<bjx-form :rules="rules" :form="formData" ref="form" style="background-color: #fff;">
				<view class="user-login">
					<bjx-form-item class="user-login-user" label-type="inline" prop="jobTitle" label="项目名称">
						<view slot="label" style="display:inline-flex;align-items: center;">
							<!-- <image class="user-login-user-img" src="@/static/images/xiangmumingchen.png" mode="">
							</image> -->
							<text class="user-login-user-text">项目名称:</text>
						</view>
						<input class="user-login-user-content" type="text" value="" placeholder="请输入项目名称"
							v-model="formData.jobTitle" name="jobTitle" style="width:470rpx;float: right;" />
					</bjx-form-item>

					<bjx-form-item class="user-login-user" label="性别" prop='gender' label-type="inline">
						<view slot="label">
							<!-- <image class="user-login-user-img" src="@/static/images/xingbie.png" mode=""></image> -->
							<text class="user-login-user-text">性别:</text>
						</view>
						<radio-group @change="radioChangeSex" style="vertical-align: middle;width:470rpx;float: right;">
							<label class="radio" style="margin-left: 20upx;">
								<radio value="1" checked />男
							</label>
							<label class="radio" style="margin-left: 20upx;">
								<radio value="2" />女
							</label>
						</radio-group>
					</bjx-form-item>
					<!-- <bjx-form-item class="user-login-user" label="是否预约" prop='isAppoint' label-type="inline">
						<view slot="label">
							<!-- <image class="user-login-user-img" src="@/static/images/xingbie.png" mode=""></image> -->
					<!-- <text class="user-login-user-text">是否预约:</text>
						</view>
						<radio-group @change="radioChangeApoint" style="vertical-align: middle;width:470rpx;float: right;">
							<label class="radio" style="margin-left: 20upx;">
								<radio value="1" checked />是
							</label>
							<label class="radio" style="margin-left: 20upx;">
								<radio value="0" />否
							</label>
						</radio-group>
					</bjx-form-item> -->

					<bjx-form-item class="user-login-user" label-type="inline" prop="minAge" label="最低年龄">
						<view slot="label" style="display:inline-flex;align-items: center;">
							<!-- <image class="user-login-user-img" src="@/static/images/zuidi.png" mode=""></image> -->
							<text class="user-login-user-text">最低年龄:</text>
						</view>
						<input class="user-login-user-content" type="number" value="" placeholder="请输入最低年龄"
							v-model="formData.minAge" name="minAge" style="width:470rpx;float: right;" />
					</bjx-form-item>

					<bjx-form-item class="user-login-user" label-type="inline" prop="maxAge" label="最高年龄">
						<view slot="label" style="display:inline-flex;align-items: center;">
							<!-- <image class="user-login-user-img" src="@/static/images/zuigao.png" mode=""></image> -->
							<text class="user-login-user-text">最高年龄:</text>
						</view>
						<input class="user-login-user-content" type="number" value="" placeholder="请输入最高年龄"
							v-model="formData.maxAge" name="maxAge" style="width:470rpx;float: right;" />
					</bjx-form-item>

					<bjx-form-item class="user-login-user" label-type="inline" prop="salary" label="工资/天">
						<view slot="label" style="display:inline-flex;align-items: center;">
							<!-- <image class="user-login-user-img" src="@/static/images/gongzi.png" mode=""></image> -->
							<text class="user-login-user-text">工资/天:</text>
						</view>
						<input class="user-login-user-content" type="number" value="" placeholder="请输入工资"
							v-model="formData.salary" name="salary" style="width:470rpx;float: right;" />
					</bjx-form-item>

					<bjx-form-item class="user-login-user" label-type="inline" prop="begin_date" label="开工时间">
						<view slot="label" style="display:inline-flex;align-items: center;">
							<!-- <image class="user-login-user-img" src="@/static/images/gongzuo.png" mode=""></image> -->
							<text class="user-login-user-text">开工日期:</text>
						</view>
						<picker mode="date" :value="formData.beginDate" :start="startDate" :end="endDate"
							@change="bindDateChange">
							<view class="uni-input" style="width:470rpx;float: right;position: relative;">
								{{formData.beginDate}}
								<image src="/static/images/riqi.png" mode=""
									style="width:32rpx;height:32rpx;position:absolute;right:0;top:50%;transform: translateY(-50%);">
								</image>
							</view>
						</picker>


					</bjx-form-item>
					<bjx-form-item class="user-login-user" label-type="inline" prop="begin_date" label="开工时间">
						<view slot="label" style="display:inline-flex;align-items: center;">
							<!-- <image class="user-login-user-img" src="@/static/images/gongzuo.png" mode=""></image> -->
							<text class="user-login-user-text">开工时间:</text>
						</view>

						<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
							<view class="uni-input" style="width:470rpx;float: right;position: relative;">
								{{time}}
								<image src="/static/images/shijian.png" mode=""
									style="width:32rpx;height:32rpx;position:absolute;right:0;top:50%;transform: translateY(-50%);">
								</image>
							</view>
						</picker>

					</bjx-form-item>
					<bjx-form-item class="user-login-user" label-type="inline" prop="days" label="工作天数">
						<view slot="label" style="display:inline-flex;align-items: center;">
							<!-- <image class="user-login-user-img" src="@/static/images/gongzuo.png" mode=""></image> -->
							<text class="user-login-user-text">工作天数:</text>
						</view>
						<input class="user-login-user-content" type="number" value="" placeholder="请输入工作天数"
							v-model="formData.days" name="days" style="width:470rpx;float: right;" />
					</bjx-form-item>

					<view class="user-login-user-detail">
						<!-- <image class="user-login-user-img" src="@/static/images/zhiwei.png" mode=""
							style="width: 40rpx;height: 30rpx;margin-right:8rpx;"></image> -->
						<text class="user-login-user-text" style="width:180rpx;margin-left:8rpx;">职位描述:</text>
						<textarea placeholder="请输入职位描述" v-model="formData.description" name="description"
							class="detail-content" />
					</view>

					<bjx-form-item class="user-login-user" label-type="inline" prop="description" label="工作地区">
						<view slot="label">
							<!-- <image class="user-login-user-img" src="@/static/images/diqu.png" mode=""></image> -->
							<text class="user-login-user-text">工作地区:</text>
						</view>
						<view class="" style="width:470rpx!important;float: right;">
							<Region :defaultValue="defaultValue" @change="onChangeRegion"></Region>
						</view>

					</bjx-form-item>

					
					<view class="user-login-user-detail">
						<!-- <image class="user-login-user-img" src="@/static/images/zhiwei.png" mode=""
							style="width: 40rpx;height: 30rpx;margin-right:8rpx;"></image> -->
						<text class="user-login-user-text" style="width:180rpx;margin-left:8rpx;">详细地址:</text>
						<textarea placeholder="请输入详细地址" v-model="formData.address" name="address"
							class="detail-content" />
					</view>

					<bjx-form-item class="user-login-user" label-type="inline" prop="number" label="人数">
						<view slot="label" style="display:inline-flex;align-items: center;">
							<!-- <image class="user-login-user-img" src="@/static/images/zhiwei.png" mode=""></image> -->
							<text class="user-login-user-text">人数:</text>
						</view>
						<input class="user-login-user-content" type="number" value="1" placeholder="请输入所需人数"
							v-model="formData.number" name="number" style="width:470rpx;float: right;" />
					</bjx-form-item>

					<bjx-form-item class="user-login-user" label-type="inline" prop="number" label="分配人员">
						<view slot="label" style="display:inline-flex;align-items: center;">
							<!-- <image class="user-login-user-img" src="@/static/images/zhiwei.png" mode=""></image> -->
							<text class="user-login-user-text">分配人员:</text>
						</view>
						<picker @change="bindPickerChange" :value="index" :range="members"
							style="width: 235px;float: right;">
							<view class="uni-input">{{members[index]}}</view>
						</picker>
					</bjx-form-item>

					<view class="" style="font-size: 28upx;float:left;margin: 20px 0;">
						<text style="float:left;">我已阅读并同意</text>
						<text style="color:#f3431a;height:60rpx;padding-top:-23upx;padding-left:-35upx" @tap="goLabor">
							《劳动合同》
						</text>
					</view>

					<view class="bottom" @tap="clickConfirm">发布</view>
				</view>
			</bjx-form>
		</view>
	</view>
</template>

<script>
	import Region from '@/components/region/region.vue';
	import {
		mapState
	} from 'vuex';
	export default {

		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				title: '发布项目',
				isLoading: true,
				noClick: true,

				index: 0,
				membersArr: [],
				members: [],

				cate: 1,
				isCate: false,
				time: '09:01',
				defaultValue: [],
				uid: 0,

				formData: {
					jobTitle: '',
					gender: 1,
					minAge: 16,
					maxAge: 60,
					salary: 0,
					days: 1,
					location: '110100',
					address: '',
					description: '',
					beginDate: currentDate,
					number: 1

					// isAppoint: 1,
				},
				rules: {
					jobTitle: {
						required: true
					},
					gender: {
						required: true
					},
					minAge: {
						required: true,
						rule: 'type:number|min:16',
						message: {
							min: '年龄不能小于16岁'
						}
					},
					maxAge: {
						required: true,
						rule: 'type:number|max:60',
						message: {
							min: '年龄必须在60岁以下'
						}
					},
					salary: {
						required: true,
						rule: 'type:number|min:0'
					},
					days: {
						required: true,
						rule: 'type:number'
					},
					location: {
						required: true,
						rule: 'type:number'
					},
					address: {
						required: true,
						rule: 'type:string'
					},
					number: {
						required: true,
						rule: 'type:number|min:1',
						message: {
							min: '人数至少为1人'
						}
					}
				},
			};
		},
		components: {
			Region
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		async onLoad(option) {
			//判断是否登录
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			this.getMembers()

			this.title = option.title;
			this.selectId = option.cid;
			this.cate = uni.getStorageSync('cate')
		},
		methods: {

			bindPickerChange: function(e) {
				this.index = e.detail.value
				if (this.index > 0) {
					this.formData.number = 1;
					this.uid = this.membersArr[this.index - 1].uid
				}
			},

			bindDateChange: function(e) {
				this.formData.beginDate = e.target.value
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			bindTimeChange: function(e) {
				this.time = e.target.value
			},

			radioChangeSex(e) {
				this.formData.gender = e.detail.value
			},

			radioChangeApoint(e) {
				this.formData.isAppoint = e.detail.value
			},

			onChangeRegion(region) {
				let id = 0;
				let area = [];
				if (region[2].id > 0) {
					id = region[2].id;
					area = [region[0].name, region[1].name, region[2].name];
				} else {
					id = region[1].id;
					area = [region[0].name, region[1].name, ''];
				}
				this.defaultValue = area;
				this.formData.location = id;
			},

			async getMembers() {
				let res = await this.$myRequest({
					url: '/getAllMembers',
					methods: 'post'
				})

				this.membersArr = res.data.data

				this.members.push('不分配');
				res.data.data.map((item) => {
					let one = item.mobile + '[' + item.realname + ']';
					this.members.push(one);
				})

			},

			// 触发提交表单
			async clickConfirm() {
				//防止连续点击
				let that = this;
				if (that.noClick) {
					that.noClick = false;
					setTimeout(function() {
						that.noClick = true;
					}, 2000)
				} else {
					this.$api.msg("请稍后点击")
					return false;
				}
				//判断是否登录
				let result = this.$api.isLogin();
				if (result === false) {
					uni.setStorageSync('cate', 2)
					return false;
				}

				if (this.cate != 2) {
					this.$api.msg('无权发布工作！');
					return false;
				}

				this.$refs.form.validate(val => {
					if (val == true) {
						if (!this.formData.description) {
							this.$api.msg('请输入职位描述！');
							return false;
						}

						//去除空格
						let addressStr = this.formData.address;
						let addressArr = new Array();
						addressArr = addressStr.split(" ");
						if (addressArr.length != 1) {
							addressStr = addressArr.join('')
						}
						let token = uni.getStorageSync('token')
						let dataObj = {
							cate: this.cate,
							token: token,
							touid: this.uid,
							job_title: this.formData.jobTitle,
							gender: this.formData.gender,
							// is_appoint: this.formData.isAppoint,
							job_category1: this.selectId,
							location1: this.formData.location,
							address: addressStr,
							salary: this.formData.salary,
							begin_date: this.formData.beginDate + ' ' + this.time,
							days: this.formData.days,
							age_below: this.formData.minAge,
							age_above: this.formData.maxAge,
							description: this.formData.description,
							number: this.formData.number
						};

						this.submit(dataObj);
					}
				})
			},

			//登录提交
			async submit(dataObj) {
				let res = await this.$myRequest({
					url: '/jobPublish',
					data: dataObj,
					methods: 'post'
				})

				let status = res.data.status
				switch (status) {
					case 1:
						this.$api.msg('提交成功，等待审核', 'none', 1000);
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages4/pages/publish-manage/publish-manage'
							})
						}, 1000)
						break;
					case 10:
						this.$api.msg(res.data.msg);
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages4/pages/company/company'
							})
						}, 1000)
						break;
					case 11:
						this.$api.msg(res.data.msg);
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages6/pages/my/my'
							})
						}, 1000)
						break;
					case 12:
						this.$api.msg(res.data.msg);
						break;
				}
			},

			//去看劳动合同
			async goLabor() {
				uni.navigateTo({
					url: "/pages6/pages/docs/labor-contract"
				})
			}
		},
	}
</script>
<style>
	page {
		background-color: #F7f7f7;
		font-size: $font-base;
	}
</style>
<style lang="scss" scoped>
	.form {
		width: 100%;
		background-color: #fff;
		// #ifdef APP-PLUS
		padding: 176rpx 5% 0;
		// #endif

		// #ifdef MP-WEIXIN
		padding: 176rpx 5% 0;
		// #endif

		// #ifdef H5
		padding: 124rpx 5% 0;
		// #endif

	}

	.user-login {
		text-align: left;
		font-size: $font-base;
		padding-bottom: 24rpx;

		.user-login-user {
			width: 100% !important;
			display: inline-block;
			vertical-align: center;
			height: 110rpx;
			line-height: 110rpx;

			.user-login-user-img {
				width: 32rpx;
				height: 30rpx;
			}

			.user-login-user-text {
				margin-left: 8rpx;
			}

			.user-login-user-content {
				border: 1px solid #eee;
				padding: 4px 4px;
				font-size: 14px;
				height: 100rpx;
			}

			.item-label {
				display: inline-flex !important;
				float: left;
			}
		}
	}

	.user-login-user-detail {
		width: 100% !important;
		display: inline-block;
		vertical-align: middle;
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;
	}

	.bottom {
		margin-top: 30rpx;
		border-radius: 10rpx;
		width: 100%;
		background-color: #f3431a;
		color: #fff;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ellipsis-1 {
		float: left !important;
	}

	.detail-content {
		display: inline-block;
		font-size: 30rpx;
		border: 1px solid #eee;
		padding: 6rpx;
		width: 470rpx;
	}
</style>